<script lang="ts" setup>
import logo from '@/assets/home/logo.png'
import { connect, check } from '@/api/home
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const user = computed(() => userStore.user)

// import { useRouter } from 'vue-router'
// const router = useRouter()

// getValite()

// console.log('env mode:', import.meta.env.MODE)

// if (import.meta.env.MODE == 'dev') {
//   doLogin()
// } else {
//   if (isDappBrowser()) {
//     doLogin()
//   } else {
//     router.push('/error')
//   }
// }

// connect()
</script>
<template>
  <div class="flex w-screen items-center justify-between px-36 py-42">
    <div class="flex items-center">
      <img class="mr-11 h-50" :src="logo" alt="logo" />
    </div>
    <div
      class="box-content flex h-60 w-200 touch-none items-center justify-center rounded-15 border-none px-30 outline-none"
      style="border: 1px solid #07f0f0"
    >
      <!--     <div>
        <img src="@/assets/common/wallet.png" class="h-24" />
      </div> -->
      <div>
        <p class="flex truncate text-center text-main" v-if="user.address == ''" @click="connect">
          &nbsp;{{ $t('Connect') }}
        </p>
        <p class="text-center text-28 text-main" v-else>&nbsp;{{ user.username }}</p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
